// logo字体的通用样式抽取成混合器
@mixin txt {
  font-family: FangSong;
  letter-spacing: -5;
  font-size: 32px;
  font-weight: bold;
  stroke-width: 0.5px;
  fill: #006CFF;
  stroke-dasharray: 90, 310;
}

// 定义向右浮动的混合器
@mixin fr {
  float: right;
}

@mixin fl {
  float: left;
}

.active{
  a{
    color: #007fff!important;
  }
}
.header {
  width: 100%;
  height: 60px;
  background: #fff;
  border-bottom: 1px solid #f1f1f1;
  color: #909090;
  margin: 0;

  .nav {
    height: 60px;
    width: 950px;
    margin: 0 auto;

    svg {
      margin: auto 0;
      position: relative;
      transform: translateY(-50%);
      top: 50%;
    }

    .text {
      @include txt;
      animation: stroke 6s infinite linear;
    }

    .text-1 {
      stroke: #e31b1c;
      animation-delay: -1.5s;
    }

    .text-2 {
      stroke: #130B19;
      animation-delay: -3s;
    }

    .text-3 {
      stroke: #89da32;
      animation-delay: -4.5s;
    }

    .text-4 {
      stroke: #fbe40a;
      animation-delay: -6s;
    }

    @keyframes stroke {
      100% {
        stroke-dashoffset: -400;
      }
    }

    .navigation {
      @include fr;
      height: 100%;
      ul {
        @include fr;
        height: 100%;
        li {
          @include fl;
          height: 100%;
          width: 100px;
          text-align: center;
          font-size: 18px;
          vertical-align: middle;
          line-height: 60px;
          
          a{
            color: #909090;
            text-decoration: none;
            &:hover{
              color: #007fff;
              cursor: pointer;
            }
            
          }
          
    //       .active{
    //         color: #fff;
    // background-color: #777;
    //       }
        }
      }
    }
  }
}
